<template>
  <div class="category-page">
    <el-card>
        <!-- 卡片头部区域 -->
        <template #header>
            <span>文章分类</span>
            <el-button style="float: right; background-color: #4F81FF;" type="primary" @click="isShow = true, operationType = 'add'">添加分类</el-button>
        </template>
        <!-- 卡片主体部分 -->
        <template>
            <el-table
                :data="$store.state.article.tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="serialNumber"
                label="序号"
                width="150">
                </el-table-column>
                <el-table-column
                prop="cate_name"
                label="项目名称"
                width="470">
                </el-table-column>
                <el-table-column
                prop="cate_alias"
                label="分类别名"
                width="400">
                </el-table-column>
                <el-table-column
                label="操作"
                width="">
                    <template #default="obj">
                        <el-button type="primary" @click="editCategory(obj.row.id)">修改</el-button>
                        <el-button type="danger" @click="del(obj.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </el-card>

    <!-- 添加或修改分类弹窗 -->
    <el-dialog  :visible.sync="isShow" style="margin-top: 15vh; color: #000; font-weight: 600;">
        <!-- 弹窗头部 -->
        <template #title>
            <span class="el-icon-tishi" style="color: #4f81ff;  font-size: 24px; margin-right: 10px; vertical-align:top"></span>
            <span>{{ title }}</span>
        </template>
        <!-- 弹窗主体 -->
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cate_name">
            <el-input v-model="form.cate_name" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="分类别名" :label-width="formLabelWidth" prop="cate_alias">
            <el-input v-model="form.cate_alias" autocomplete="off" placeholder="请输入别名"></el-input>
            </el-form-item>
        </el-form>
        <!-- 弹窗按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button style="background-color: #eeeeee; color: #2f2f2f" @click="cancel">取消</el-button>
            <el-button style="background-color: #4f81ff; color: #fff" @click="addCategory">{{ btnName }}</el-button>
        </div>
    </el-dialog>

    <!-- 删除二次提示弹窗 width="30%" :before-close="handleClose"-->
    <el-dialog
    :visible="delShow"

    style="margin-top: 15vh; color: #000; font-weight: 600;"
    >
        <!-- 弹窗头部 -->
        <template #title>
            <span class="el-icon-tishi" style="color: #4f81ff;  font-size: 24px; margin-right: 10px; vertical-align:top"></span>
            <span>提示</span>
        </template>
        <span>确定要删除本条信息吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delShow = false">取 消</el-button>
            <el-button type="primary" @click="twoConfirm(true)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { userAddCategory, userSubCategory, getCategoryInfo, userEditCategory } from '@/api/article'
export default {
  name: 'ArticleCategory',
  data () {
    return {
      isShow: false,
      delShow: false,
      delId: '',
      operationType: 'add',
      form: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [
          { required: true, message: '请输入分类名称', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '长度在 1~10 个字符', trigger: ['blur', 'change'] }
        ],
        cate_alias: [
          { required: true, message: '请输入分类别名', trigger: ['blur', 'change'] },
          { min: 1, max: 15, message: '长度在 1~15 个字符', trigger: ['blur', 'change'] }
        ]
      },
      formLabelWidth: '80px'
    }
  },
  async created () {
    this.initList()
    // console.log(this.$store.state.article.tableData)
  },
  //   根据类型判断弹窗标题显示
  computed: {
    title () {
      let title = '标题'

      if (this.operationType === 'add') title = '添加分类'
      if (this.operationType === 'edit') title = '修改文章分类'

      return title
    },
    btnName () {
      let btnName = '标题'

      if (this.operationType === 'add') btnName = '添加'
      if (this.operationType === 'edit') btnName = '确认修改'

      return btnName
    }
  },
  methods: {
    // 点击修改按钮时，显示修改弹窗
    async editCategory (id) {
      // 设置标题
      this.operationType = 'edit'
      const res = await getCategoryInfo(id)
      //   console.log(res)
      //   渲染弹窗数据
      this.form = res.data
      //   显示弹窗
      this.isShow = true
    },
    // 封装二次确认删除函数
    async twoConfirm (flag) {
      if (flag) {
        const res = await userSubCategory(this.delId)
        this.$message.success(res.message)
        //   console.log(res)
        // 关闭弹窗
        this.delShow = false
        //   重新渲染页面
        this.initList()
      }
    },
    // 封装删除文章分类函数
    del (id) {
      // 点击删除按钮，显示二次确认弹窗
      this.delShow = true
      this.delId = id
      //   //   console.log(id)
    },
    // 封装初始化渲染函数
    async initList () {
      this.$store.dispatch('article/categoryAction')
    },
    // 封装关闭添加分类弹窗和重置表单函数
    reset () {
      // 关闭弹窗
      this.isShow = false
      // 重置表单
      this.$refs.form.resetFields()
    },
    // 封装添加分类或修改分类
    async addCategory () {
      // 先校验输入内容是否合规
      await this.$refs.form.validate()
      //   添加分类请求
      if (this.operationType === 'add') {
        const res = await userAddCategory(this.form)
        //   console.log(res)
        // 判断提示语是否为添加成功
        if (res.message !== '新增文章分类成功！') {
          this.$message.error(res.message)
          return
        }
        //   添加成功，提示用户
        this.$message.success(res.message)
      }

      //   修改分类请求
      if (this.operationType === 'edit') {
        const { id, cate_name, cate_alias } = this.form
        await userEditCategory({ id, cate_name, cate_alias })

        // 请求成功进行提示
        this.$message.success('修改成功')
      }

      //   添加成功，关闭弹窗和重置表单
      this.reset()

      //   重新渲染页面
      this.initList()
    },
    // 封装取消添加分类函数
    cancel () {
      // 关闭弹窗和重置表单
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
    height: 68px;
    line-height: 31px;
    > span {
        font-size: 16px;
    }
}
::v-deep .el-card__body {
    padding: 30px;
}
.el-table thead {
    color: rgba(0,0,0,0.40);
}
.el-form-item__content {
    margin-left: 70px;
}
::v-deep .el-dialog {
    width: 480px;
}
::v-deep  .el-dialog__headerbtn  .el-dialog__close {
    color: #000;
}
::v-deep  .el-dialog__headerbtn:hover  .el-dialog__close {
    color: #999999;
}
</style>
